<template>
    <div class="login-container">
        <div class="login-card">
            <div class="login-header">
                <h2>信息集采系统</h2>
                <h3>管理员登录</h3>
            </div>

            <van-form @submit="onSubmit" class="login-form">
                <van-cell-group inset>
                    <van-field v-model="loginForm.username" name="username" label="账号" placeholder="请输入账号"
                        :rules="[{ required: true, message: '请输入账号' }]" />
                    <van-field v-model="loginForm.password" type="password" name="password" label="密码"
                        placeholder="请输入密码" :rules="[{ required: true, message: '请输入密码' }]" />
                </van-cell-group>

                <div class="login-button">
                    <van-button round block type="primary" native-type="submit">
                        登录
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { login, } from '../api/login'
const router = useRouter()

// 登录表单数据
const loginForm = reactive({
    username: '',
    password: ''
})

// 登录提交处理
const onSubmit = (values: any) => {
    // test().then((res) => {
    //     console.log('测试接口返回数据:', res)
    // })
    // 简单验证
    if (!values.username || !values.password) {
        showToast('请输入账号和密码')
        return
    }

    login(values.username, values.password).then((res) => {
        if (res.code === 200) {
            // 登录成功
            localStorage.setItem('access_token', res.data.token)
            localStorage.setItem('user', JSON.stringify(res.data.user))
            localStorage.setItem('role', res.data.user.role)
            const user = JSON.parse(localStorage.getItem('user')!)
            console.log('登录身份', user)

            showToast('登录成功')
            router.push('/')

        } else {
            // 登录失败
            showToast(res.message)
        }
    })
    // 这里可以添加实际的登录逻辑
    console.log('登录信息:', values)

}
</script>

<style scoped>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    padding: 20px;
    /* 添加以下属性确保全屏覆盖 */
    width: 100vw;
    height: 85vh;
    box-sizing: border-box;
}

.login-card {
    width: 100%;
    max-width: 400px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 30px 20px;
    /* 添加最大高度限制，防止内容溢出 */
    max-height: 90vh;
    overflow-y: auto;
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-header h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 8px;
}

.login-header p {
    font-size: 16px;
    color: #666;
}

.login-form {
    margin-top: 20px;
}

.login-button {
    margin-top: 30px;
}
</style>